<template>
  <el-dialog title="项目" v-model="localVisible" width="50%">
    <el-form :model="form" class="form-box">
      <el-row class="form-box-row">
        <el-form-item label="项目编号">
          <el-input v-model="form.proNum"></el-input>
        </el-form-item>
        <el-form-item label="项目名">
          <el-input v-model="form.nodeName"></el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="nodeStartTime">
          <el-date-picker v-model="form.nodeStartTime" placeholder="选择开始时间" type="datetime" format="YYYY/MM/DD hh:mm:ss"
            value-format="x" class="!w-1/1" />
        </el-form-item>
        <el-form-item label="结束时间" prop="nodeEndTime">
          <el-date-picker v-model="form.nodeEndTime" placeholder="选择结束时间" type="datetime" format="YYYY/MM/DD hh:mm:ss"
            value-format="x" class="!w-1/1" />
        </el-form-item>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, computed, defineProps, defineEmits, watch } from 'vue'
const props = defineProps({
  visible: {
    type: Boolean,
    required: true
  },
  initial: {
    type: Number,
    required: true
  }
})

const emit = defineEmits(['update:visible', 'add'])


console.log(props, "props")

const localVisible = computed({
  get() {
    return props.visible
  },
  set(value) {
    emit('update:visible', value)
  }
})

watch(
  () => props.initial,
  (newInitial) => {
    form.id = newInitial + 1;
    form.proNum = newInitial + 1;
  }
);

const now = new Date();
const timestamp = now.getTime();

const form = reactive({
  id: props.initial + 1,
  proNum: props.initial + 1,
  nodeName: '',
  nodeStartTime: timestamp,
  nodeEndTime: "",
})

const cancel = () => {
  localVisible.value = false
}

const confirm = () => {
  emit('add', { ...form })
  localVisible.value = false
  resetForm();
}

const resetForm = () => {
  form.id = '';
  form.proNum = '';
  form.nodeName = '';
  form.nodeEndTime = '';
};
</script>